var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form" v-loading.fullscreen.lock="loading">
      <search-btn-view :btn-text="['订单查询','明细查询','配套查询']" @before-open="resetSearch"  @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="exportExcel" v-if="showTableMode==='order'">导出excel</el-button>
          <el-button size="medium" type="primary" @click="changeMode" v-if="showTableMode==='order'">
            <span v-if="mode==='simple'">复杂模式</span>
            <span v-else-if="mode==='hard'">简单模式</span>
          </el-button>
          <el-button size="medium" type="primary" @click="toLookMatchColorHelp" v-if="showTableMode==='match'">
            配套情况颜色说明
          </el-button>
          <slot></slot>
        </template>
        <div slot="search-content" class="querry-order-search clearfix">
          <div class="search-form-item">
            <el-select v-model="search.timeType" style="width:115px;">
              <el-option :value="1" label="制单日期"></el-option>
              <el-option :value="2" label="交货日期"></el-option>
              <el-option :value="3" label="人工排期"></el-option>
            </el-select>
            <el-date-picker style="width:140px;" v-model="search.startDate" value-format="timestamp" :editable="false"
              :picker-options="startPickerOptions">
            </el-date-picker>
            -
            <el-date-picker style="width:140px;" v-model="search.endDate" value-format="timestamp" :editable="false"
              :picker-options="endPickerOptions">
            </el-date-picker>
          </div>
          <div class="search-form-item">
            <label>拖期</label>
            <el-select clearable v-model="search.dutyStatus" class="form-input">
              <el-option :value="1" label="拖期"></el-option>
              <el-option :value="2" label="即将拖期"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>部门</label>
            <el-select clearable v-model="search.deptId" class="form-input" @change="deptChange">
              <el-option v-for="dept in deptList" :key="'dept_'+dept.id" :value="dept.id" :label="dept.name"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>车间</label>
            <el-select clearable v-model="search.workShop" class="form-input" :loading="workShopLoading">
              <el-option v-for="workShop in search.workShopList" :key="'workShop_'+workShop.id" :value="workShop.id"
                :label="workShop.name"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>状态</label>
            <el-select clearable v-model="search.type" class="form-input">
              <el-option :value="1" label="完成"></el-option>
              <el-option :value="2" label="未完成"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>客户型号</label>
            <el-input clearable v-model="search.customerId" class="form-input" placeholder="请输入客户型号"></el-input>
          </div>
          <div class="search-form-item">
            <label>客户</label>
            <el-input clearable v-model="search.customer" class="form-input" placeholder="请输入客户"></el-input>
          </div>
          <div class="search-form-item">
            <label>订单编号</label>
            <el-input clearable v-model="search.companyOrderId" class="form-input" style="width:220px;" placeholder="请输入公司订单编号"></el-input>
          </div>
          <div class="search-form-item">
            <label>工厂型号</label>
            <el-input clearable v-model="search.factoryId" class="form-input" placeholder="请输入工厂型号"></el-input>
          </div>
          <div class="search-form-item">
            <label>订单类型</label>
            <el-select filterable clearable v-model="search.orderType" class="form-input" placeholder="请选择订单类型">
              <el-option v-for="(orderType,index) in orderTypeList" :key="'orderType_'+index" :value="orderType"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>订单完成类型</label>
            <el-select clearable v-model="search.isSetOrder" class="form-input" placeholder="请选择订单完成类型">
              <el-option v-for="(orderSetType,index) in orderSetTypeList" :key="'setType_'+index" :value="orderSetType.value"
                :label="orderSetType.label"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>物料类型</label>
            <el-select filterable clearable v-model="search.materialType" class="form-input" placeholder="请选择物料类型">
              <el-option v-for="(materialType,index) in materialTypeList" :key="'materialType_'+index" :value="materialType"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>编号</label>
            <el-input clearable v-model="search.color" class="form-input" placeholder="请输入编号"></el-input>
          </div>
          <div class="search-form-item">
            <label>描述</label>
            <el-input clearable v-model="search.coloDescription" class="form-input" placeholder="请输入描述"></el-input>
          </div>
          <div class="search-form-item">
            <label>规格</label>
            <el-input clearable v-model="search.model" class="form-input" placeholder="请输入规格"></el-input>
          </div>
          <div class="search-form-item">
            <label>加工工艺</label>
            <el-input clearable v-model="search.arts" class="form-input" placeholder="请输入加工工艺"></el-input>
          </div>
        </div>
      </search-btn-view>

      <template v-if="showTableMode==='match'">
        <el-dialog title="配套情况颜色说明" :visible.sync="openColorHelp" top="calc(50vh - 112px)" width="450px">
          <color-help style="height:160px;"></color-help>
        </el-dialog>
      </template>
    </div>
  `;

  return {
    props: {
      search: {
        type: Object,
        required: true
      },
      resetSearchData: {
        type: Function,
        required: true
      },
      mode: {
        type: String,
        default: 'hard'
      },
      showTableMode: {
        type: String,
        default: 'order'
      }
    },

    data: function () {
      var self = this;
      return {
        loading: false,
        workShopLoading: false,
        deptList: [],
        orderTypeList: [],
        materialTypeList: [],
        openColorHelp: false,
        orderSetTypeList: [{
          value: -3,
          label: "未完成"
        }, {
          value: -1,
          label: "自动完成"
        }, {
          value: -2,
          label: "设置完成"
        }],
        startPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'start');
          }
        },
        endPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'end');
          }
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setDeptList(),
        this.setOrderTypeList(),
        this.setMaterialTypeList()
      ]).then(function (res) {
        var deptList = res[0];
        self.loading = false;
        if (deptList.length === 0) {
          self.$emit('init-search');
          return;
        }
        if (deptList.length === 1) {
          self.search.deptId = deptList[0].id;
        }
        self.deptChange().then(function () {
          self.$emit('init-search');
        });
      });
    },

    methods: {
      setDeptList: function () {
        var self = this;
        return ajaxRequest('basicData/getProductionDepartment').then(function (deptList) {
          deptList = _.map(deptList, function (dept) {
            return {
              id: dept.id,
              name: dept.deptName
            };
          });
          self.deptList = deptList;
          return deptList;
        }).catch(function () {
          return [];
        });
      },

      setOrderTypeList: function () {
        var self = this;
        return DropdownUtil.getOrderTypeList().then(function (orderTypeList) {
          self.orderTypeList = orderTypeList;
          return orderTypeList;
        });
      },

      setMaterialTypeList: function () {
        var self = this;
        return DropdownUtil.getPublicMaterialTypeList().then(function (materialTypeList) {
          self.materialTypeList = materialTypeList;
          return materialTypeList;
        });
      },

      deptChange: function () {
        var search = this.search;
        var deptId = search.deptId;
        if (deptId === '') {
          search.workShop = '';
          search.workShopList = [];
          return new Promise(function (resole) {
            resole([]);
          });
        }

        this.workShopLoading = true;
        var self = this;
        return this.getWorkShop(deptId).then(function (workShopList) {
          self.search.workShopList = workShopList;
          self.search.workShop = '';
          self.workShopLoading = false;
          return workShopList;
        }).catch(function () {
          self.workShopLoading = false;
          return [];
        });
      },

      getWorkShop: function (deptId) {
        return new Promise(function (resole, reject) {
          if (deptId === '') {
            resole([]);
            return;
          }

          ajaxRequest('basicData/getDeptNoMegerWorkShop', {
            deptId: deptId
          }).then(function (workShopList) {
            workShopList = _.map(workShopList, function (workShop) {
              return {
                id: workShop.id,
                name: workShop.workshopName
              };
            });
            resole(workShopList);
          }).catch(function () {
            reject();
          });
        });
      },

      resetSearch: function () {
        this.resetSearchData();
      },

      searchData: function (index) {
        var searchMode;
        if (index === 0) {
          searchMode = 'order';
        } else if (index === 1) {
          searchMode = 'detail';
        } else {
          searchMode = 'match';
        }
        this.$emit('search-click', searchMode, index);
      },

      exportExcel: function () {
        this.resetSearch();
        var postData = this.search.getObject();
        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();
        var path = `${basePath}/order/downlodeOrderWhere?${formParam}`;
        window.open(path);
      },

      changeMode: function () {
        var mode = this.mode;
        if (mode === 'simple') {
          mode = 'hard';
        } else if (mode === 'hard') {
          mode = 'simple';
        }
        this.$emit('update:mode', mode);
      },

      toLookMatchColorHelp: function () {
        this.openColorHelp = true;
      },

      checkDateRange: function (time, type) {
        var search = this.search;
        if (type === 'start') {
          var endDate = search.endDate;
          if (endDate !== null) {
            return moment(time).isSameOrBefore(endDate, 'day');
          }
        } else if (type === 'end') {
          var startDate = search.startDate;
          if (startDate !== null) {
            return moment(time).isSameOrAfter(startDate, 'day');
          }
        }
        return true;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      ColorHelp: ColorHelp
    },

    template: template
  };
}();